<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>   
  </head>
  <body>
    <div id="app">     
      {{fullName}}  
         {{ message  }}       
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         {{  showmsgl() }}  
         {{ sml }}
         <!--  采用属性的方式调用函数  -->
    </div>   
  </body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
   
  const { createApp } = Vue;
  createApp({    
    data() {
      return {       
        message: "Hello Vue!",        
        firstName: 'John',
      lastName: 'Doe'
      };
    },   
    methods: {
      showmsgl(){
        console.log("showmsgl()");
        return  this.message.length ;
      }
    },
    computed:{
      sml(){
        console.log("--------------()");
        return  this.message.length* 2 ;
      },
      fullName:{
        // getters
        get(){
          return  this.firstName + " " + this.lastName
        },
        // John Doe
        set(value ){
          [this.firstName, this.lastName] = value.split(' ')
          //  ... 
        }
      }

    }
    
  }).mount("#app");
</script>
